🐥 新手開發日記
本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。
在上一篇文章中，我們介紹了如何運用 Accordion（手風琴） 元件來製作常見 FAQ。這項元件同樣非常適合延伸套用在「任務列表」上，讓過長的內容可以自由折疊，維持介面的乾淨清爽。
不過在任務列表的情境中，我們需要加上一些視覺變化來滿足實際的產品需求：在手風琴標題上直觀呈現任務進度與累積時數。
為了將進度直觀地展現給使用者，我們選擇在 Accordion 的標題按鈕（<button>）內部組合 Bootstrap 5 的 progress 元件與總計時數文字。
Bootstrap 的 Progress 元件由兩層結構組成：外層 .progress 定義進度條的背景與高度，內層 .progress-bar 則透過 CSS style 設定寬度比例（例如 style="width: 60%;"）來呈現進度。
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
(參考資料：Bootstrap 5 components-Progress)
在開發過程中，我遇到了視覺上的排版挑戰：不同任務標題的文字長短不一，且總計時數的位數也不同。如果讓元件自然排列，會導致每個標題內的進度條起點參差不齊，看起來非常凌亂。
針對這個問題，我嘗試了兩種解法：
最初嘗試將「進度條 + 總計時數」包在同一個容器並加上 ms-auto 推至最右側。但因為「總計時數」的字數長短不一（例如 1 天 8 小時 20 分 vs 21 天 8 小時 20 分），導致進度條的起點無法對齊。
(使用 ms-auto 的效果)
使用 Bootstrap 的 Grid System（網格系統） 來精確掌控排版比例。
在 Accordion 的標題 <button> 內部建立 .row，並在斷點 md (768px) 以上劃分欄位：
左側標題區塊：佔據 col-md-4。
右側進度條與時數區塊：佔據 col-md-8。
<div class="row w-100 align-items-center me-2">
<!-- 1. 左側：任務標題 (佔據 4 欄) -->
<div class="col-md-4">
<p class="text-truncate me-3 mb-2 mb-md-0 fw-bold">
JavaScript線上課程
</p>
</div>
<!-- 2. 右側：進度條與總計時數 (佔據 8 欄) -->
<div class="col-md-8">
<div class="d-flex align-items-center">
<!-- 進度條 -->
<div class="progress me-3 w-100" style="height: 12px;">
<div
class="progress-bar"
role="progressbar"
style="width: 60%"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
>
60%
</div>
</div>
<!-- 總計時間 -->
<span class="text-nowrap text-secondary d-none d-md-inline-block">
總計：1 天 15 小時 20 分
</span>
</div>
</div>
</div>
透過 Grid System 分配比例後，無論標題文字和總計時間長度如何變化，所有手風琴標題內的進度條起點都會從第 5 欄的開始，呈現對齊的視覺效果。
(使用 Grid System 後完美對齊)
解決了標題排版後，接著處理點擊手風琴展開後的「子任務清單」。改寫了先前介紹過的 List Group（帶有標籤與狀態的範例） 來建立這個清單。
在此區塊中，我們還會用到了以下三個 Bootstrap 元件：
Badges（標籤）：用於標示子任務狀態（例如：進行中、已完成）。
Buttons（按鈕）：觸發動作的載體。
Bootstrap Icons：配合按鈕呈現「編輯」與「刪除」等操作圖示。
(任務清單)
(參考資料：Bootstrap 5 components-Badges)
(參考資料：Bootstrap 5 components-Buttons)
Bootstrap 官方提供了豐富且高彈性的圖示庫。套用步驟非常簡單：
<head> 標籤內載入 CSS 連結。<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
/>
<i class="bi bi-pencil"></i>）。
iThome鐵人賽
看影片追技術